
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>HTML <span class="color_h1">表格</span></h1>
<hr/>
<p>HTML 表格由 <span class="marked">&lt;table&gt;</span> 标签来定义。</p>
<p>
HTML 表格是一种用于展示结构化数据的标记语言元素。</p>
<p>每个表格均有若干行（由 <span class="marked">&lt;tr&gt;</span> 标签定义），每行被分割为若干单元格（由 <span class="marked">&lt;td&gt;</span> 标签定义），表格可以包含标题行（<span class="marked">&lt;th&gt;</span>）用于定义列的标题。</p>
<ul>
<li><strong>tr</strong>：tr 是 table row 的缩写，表示表格的一行。</li>
<li><strong>td</strong>：td 是 table data 的缩写，表示表格的数据单元格。</li>
<li><strong>th</strong>：th 是 table header的缩写，表示表格的表头单元格。</li></ul>
<p>数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</p>
<p>HTML 表格生成器：<a  rel="noopener" target="_blank">https://c.runoob.com/front-end/7688/</a>。</p>
<h3>以下是一个简单的 HTML 表格实例:</h3>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
&lt;table&gt;<br/>
  &lt;thead&gt;<br/>
    &lt;tr&gt;<br/>
      &lt;th&gt;列标题1&lt;/th&gt;<br/>
      &lt;th&gt;列标题2&lt;/th&gt;<br/>
      &lt;th&gt;列标题3&lt;/th&gt;<br/>
    &lt;/tr&gt;<br/>
  &lt;/thead&gt;<br/>
  &lt;tbody&gt;<br/>
    &lt;tr&gt;<br/>
      &lt;td&gt;行1，列1&lt;/td&gt;<br/>
      &lt;td&gt;行1，列2&lt;/td&gt;<br/>
      &lt;td&gt;行1，列3&lt;/td&gt;<br/>
    &lt;/tr&gt;<br/>
    &lt;tr&gt;<br/>
      &lt;td&gt;行2，列1&lt;/td&gt;<br/>
      &lt;td&gt;行2，列2&lt;/td&gt;<br/>
      &lt;td&gt;行2，列3&lt;/td&gt;<br/>
    &lt;/tr&gt;<br/>
  &lt;/tbody&gt;<br/>
&lt;/table&gt;<br/>
</div></div>
<p>以上的表格实例代码中，&lt;table&gt; 元素表示整个表格，它包含两个主要部分：&lt;thead&gt; 和 &lt;tbody&gt;。</p>
<ul>
<li><p><strong>&lt;thead &gt; 用于定义表格的标题部分:</strong> 在 &lt;thead &gt; 中，使用 &lt;th &gt; 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。</p></li>
<li><p><strong>&lt;tbody &gt; 用于定义表格的主体部分:</strong> 在 &lt;tbody &gt; 中，使用 &lt;tr &gt; 元素定义行，并在每行中使用 &lt;td &gt; 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。</p></li></ul>
<p>通过使用 &lt;th &gt; 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。</p>
<p> HTML 表格还可以具有其他部分，如 &lt;tfoot &gt; （表格页脚）和 &lt;caption &gt; （表格标题），&lt;tfoot &gt; 可用于在表格的底部定义摘要、统计信息等内容。 &lt;caption &gt; 可用于为整个表格定义标题。</p><p>
HTML 表格还支持合并单元格和跨行/跨列的操作，以及其他样式和属性的应用，以满足各种需求。</p><p>
我们也可以使用 CSS 来进一步自定义表格的样式和外观。
    </p>
<br/>
<hr/><div class="tryit_ex">
<img alt="Examples" decoding="async" height="46px" src="/images/tryitimg.gif" width="40"/><h2>在线实例</h2>
</div>
<div class="example"><h2 class="example">实例</h2> <div class="example_code"><div class="hl-main"><span class="hl-brackets">&lt;</span><span class="hl-reserved">h4</span><span class="hl-brackets">&gt;</span><span class="hl-code">一列:</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">h4</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">table</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">1</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">100</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">h4</span><span class="hl-brackets">&gt;</span><span class="hl-code">一行三列:</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">h4</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">table</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">1</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">100</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">200</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">300</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">h4</span><span class="hl-brackets">&gt;</span><span class="hl-code">两行三列:</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">h4</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">table</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">1</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">100</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">200</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">300</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">400</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">500</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">600</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span></div></div><br/>
<a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a><p>（可以在本页底端找到更多实例。）</p>
</div>
<h2>表格实例</h2>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-brackets">&lt;</span><span class="hl-reserved">table</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">1</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">row 1, cell 1</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">row 1, cell 2</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">row 2, cell 1</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">row 2, cell 2</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span></div>
</div>
</div>
<p>在浏览器显示如下：:</p>
<p><img decoding="async" src="https://www.runoob.com/wp-content/uploads/2013/07/4AEE0F4B-669C-4BBC-BEC4-6953E1B0E278.jpg"/></p>
<hr/><h2>HTML 表格和边框属性</h2>
<p>如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
</p>
<p>使用边框属性来显示一个带有边框的表格：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-brackets">&lt;</span><span class="hl-reserved">table</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">1</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">Row 1, cell 1</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">Row 1, cell 2</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span></div>
</div>
</div>
<hr/><h2>HTML 表格表头</h2>
<p>表格的表头使用 &lt;th&gt; 标签进行定义。</p>
<p>大多数浏览器会把表头显示为粗体居中的文本：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-brackets">&lt;</span><span class="hl-reserved">table</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">1</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">th</span><span class="hl-brackets">&gt;</span><span class="hl-code">Header 1</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">th</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">th</span><span class="hl-brackets">&gt;</span><span class="hl-code">Header 2</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">th</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">row 1, cell 1</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">row 1, cell 2</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">row 2, cell 1</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">row 2, cell 2</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">td</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">tr</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">table</span><span class="hl-brackets">&gt;</span></div>
</div>
</div>
<p>在浏览器显示如下：</p>
<p><img decoding="async" src="https://www.runoob.com/wp-content/uploads/2013/07/CB476DA7-7279-4892-A424-657772E385BA.jpg"/></p>
<br/>
<hr/><div class="tryit_ex">
<img alt="Examples" decoding="async" height="46px" src="/images/tryitimg.gif" width="40"/><h2>更多实例</h2>
</div>
<p><a  rel="noopener noreferrer" target="_blank">没有边框的表格</a><br/>
本例演示一个没有边框的表格。</p>
<p><a  rel="noopener noreferrer" target="_blank">表格中的表头(Heading)</a><br/>
本例演示如何显示表格表头。</p>
<p><a  rel="noopener noreferrer" target="_blank">带有标题的表格</a><br/>
本例演示一个带标题 (caption) 的表格</p>
<p><a  rel="noopener noreferrer" target="_blank">跨行或跨列的表格单元格</a><br/>
本例演示如何定义跨行或跨列的表格单元格。</p>
<p><a  rel="noopener noreferrer" target="_blank">表格内的标签</a><br/>
本例演示如何在不同的元素内显示元素。</p>
<p><a  rel="noopener noreferrer" target="_blank">单元格边距(Cell padding)</a><br/>
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。</p>
<p><a  rel="noopener noreferrer" target="_blank">单元格间距(Cell spacing)</a><br/>
本例演示如何使用 Cell spacing 增加单元格之间的距离。</p>
<p><a  rel="noopener noreferrer" target="_blank">漂亮的表格</a></p>
<hr/><h2>HTML 表格标签</h2>
<table class="reference notranslate">
<tbody><tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
<tr>
<td><a >&lt;table&gt;</a></td>
<td>定义表格</td>
</tr>
<tr>
<td><a >&lt;th&gt;</a></td>
<td>定义表格的表头</td>
</tr>
<tr>
<td><a >&lt;tr&gt;</a></td>
<td>定义表格的行</td>
</tr>
<tr>
<td><a >&lt;td&gt;</a></td>
<td>定义表格单元</td>
</tr>
<tr>
<td><a >&lt;caption&gt;</a></td>
<td>定义表格标题</td>
</tr>
<tr>
<td><a >&lt;colgroup&gt;</a></td>
<td>定义表格列的组</td>
</tr>
<tr>
<td><a >&lt;col&gt;</a></td>
<td>定义用于表格列的属性</td>
</tr>
<tr>
<td><a >&lt;thead&gt;</a></td>
<td>定义表格的页眉</td>
</tr>
<tr>
<td><a >&lt;tbody&gt;</a></td>
<td>定义表格的主体</td>
</tr>
<tr>
<td><a >&lt;tfoot&gt;</a></td>
<td>定义表格的页脚
</td>
</tr>
</tbody></table> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    